<template>
  <div class="addDevice-container">
    <el-form ref="formRef" :model="d.form" label-width="100px">
      <section class="info-content">
        <xm-card-header title="基本信息"></xm-card-header>
        <el-row :gutter="20">
          <el-col :span="6">
            <XmFIntput
              quick
              v-model="d.form.apparatusName"
              prop="apparatusName"
              label="器械名称:"
            ></XmFIntput>
          </el-col>
          <el-col :span="6">
            <XmFIntput
              quick
              v-model="d.form.deviceModel"
              prop="deviceModel"
              label="器械型号:"
            ></XmFIntput>
          </el-col>
          <el-col :span="6">
            <XmFIntput
              quick
              v-model="d.form.specifications"
              prop="specifications"
              label="产品尺寸:"
            ></XmFIntput>
          </el-col>
          <el-col :span="6">
            <XmFIntput
              quick
              v-number:2
              v-model="d.form.grossWeight"
              prop="grossWeight"
              label="商品毛重(kg):"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <XmFSelect
              quick
              v-model="d.form.intendedAge"
              prop="intendedAge"
              label="适用年龄:"
              :options="deviceFitPeople"
              multiple
            ></XmFSelect>
          </el-col>
          <el-col :span="6">
            <!-- 将此处改成多选框 -->
            <XmFIntput
              quick
              v-model="d.form.intendedUse"
              prop="intendedUse"
              label="适用范围:"
            ></XmFIntput>
          </el-col>
          <el-col :span="6">
            <XmFSelect
              quick
              v-model="d.form.type"
              prop="type"
              label="器械分类:"
              :options="deviceClassification"
            ></XmFSelect>
          </el-col>
          <el-col :span="6">
            <XmFIntput
              quick
              v-model="d.form.typeExplain"
              prop="typeExplain"
              label="分类内容:"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <XmFIntput
              quick
              v-model="d.form.recordNo"
              label-width="200px"
              label="医疗器械注册证编号/备案:"
              prop="recordNo"
            ></XmFIntput>
          </el-col>
          <el-col :span="12">
            <XmFIntput
              quick
              v-model="d.form.approvalNumber"
              label-width="200px"
              label="生产许可证/备案凭证编号:"
              prop="approvalNumber"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <XmFIntput
              quick
              label-width="150px"
              v-model="d.form.productTechnologyNo"
              label="产品技术要求编号:"
              prop="productTechnologyNo"
            ></XmFIntput>
          </el-col>
          <el-col :span="6">
            <XmFIntput
              quick
              v-number
              label-width="150px"
              v-model="d.form.termValidity"
              label="寿命/保修期(月):"
              prop="termValidity"
            ></XmFIntput>
          </el-col>
        </el-row>
      </section>
      <section class="info-content">
        <xm-card-header title="主要"></xm-card-header>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="生产企业信息:"
          prop="createEnterprise"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.createEnterprise"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="其他信息:"
          prop="other"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.other"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
      </section>
      <section class="info-content">
        <xm-card-header
          title="预警设置"
          subTitle="未填写则默认有效期预警为180天及库存预警为10"
        ></xm-card-header>
        <XmFIntput
          quick
          v-model.number="d.form.earlyWarningDay"
          prop="earlyWarningDay"
          label="有效期预警天数:"
        ></XmFIntput>
        <XmFIntput
          quick
          v-model.number="d.form.earlyWarningNumber"
          prop="earlyWarningNumber"
          label="库存预警件数:"
        ></XmFIntput>
      </section>

      <section class="info-content">
        <xm-card-header title="证书图片"></xm-card-header>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="证书图片"
          prop="certificatePicture"
        >
          <file-upload
            ref="certificatePictureRef"
            v-model="d.form.certificatePicture"
          ></file-upload>
        </el-form-item>
      </section>

      <section class="info-content">
        <xm-card-header title="附件"></xm-card-header>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="说明书图片"
          prop="imgUrls"
        >
          <file-upload ref="imgUrlsRef" v-model="d.form.imgUrls"></file-upload>
        </el-form-item>
      </section>
      <section class="info-content foot">
        <el-button type="primary" @click="toSave">保存</el-button>
        <el-button @click="toBack">取消</el-button>
      </section>
    </el-form>
  </div>
</template>
<script>
  import medicinal from '@/hooks/medicinal.vue'
  import { save, loadData } from '@/api/modules/device'
  import common from '@/utils/common'
  import { reactive, ref, onBeforeMount } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  export default {
    name: 'addDevice',
    setup() {
      const d = reactive({ form: {} })

      const route = useRoute()
      const router = useRouter()
      const toloadData = async function () {
        common.XmLoading(true)
        const res = await loadData({ id: route.query.id }).catch(() => {})
        d.form = res.data
        console.log('res =' + JSON.stringify(res))
        common.XmLoading()
      }
      const formRef = ref()
      const certificatePictureRef = ref(null)
      const imgUrlsRef = ref(null)
      const toSave = function () {
        if (
          !certificatePictureRef.value.getStatus() ||
          !imgUrlsRef.value.getStatus()
        ) {
          common.XmMessage(3, '图片还未上传完成')
          return
        }
        formRef.value.validate(async (valid) => {
          if (valid) {
            // TODO 年龄多选
            await save({ ...d.form, id: route.query.id })
            common.XmMessage(0, '保存成功')
            router.go(-1)
          } else {
            return false
          }
        })
      }

      const toBack = function () {
        router.go(-1)
      }
      onBeforeMount(() => {
        if (route.query.id) {
          toloadData()
        }
      })

      return {
        d,
        toBack,
        formRef,
        toSave,
        toloadData,
        certificatePictureRef,
        imgUrlsRef,
        ...medicinal(),
      }
    },
  }
</script>
<style lang="scss" scoped>
  .addDevice-container {
    .info-content {
      margin: 22px;
      background-color: white;
      padding: 15px;
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
